<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			button {
				display: inline-block;
				width: 100px;
				height: 40px;
				background-color: skyblue;
				border: 1px solid skyblue;
				color: white;
				font-size: 30px;
				font-family: "微软雅黑";
				font-weight: 800;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<p>2.shift:从数组中把第一个元素删除，并返回这个元素的值。 <br />
		unshift: 在数组开头添加一个或更多元素，并返回新的长度 <br />
		push:在数组中添加元素，并返回新的长度 <br />
		pop:从数组中把最后一个元素删除，并返回这个元素的值。</p>
		<p>3.事件绑定和普通事件有什么区别:普通事件只支持单个事件，而事件绑定可以添加多个事件</p>
		<p>4.ajax请求的时候get和post方式的区别? <br />
		使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
		使用Get请求发送数据量小,Post请求发送数据量大</p>
		<p>5.call和apply的区别:传递参数的方式。用法上不同，主要是参数不完全同 <br />
		call( thisArg [，arg1，arg2，… ] );  // 参数列表，arg1，arg2，... <br />
		apply(thisArg [，argArray] );   // 参数数组，argArray</p>
		<p>6.事件委托是什么, 使用事件委托有什么好处? <br />
			利用冒泡的原理，把事件加到父级上，触发执行效果。<br />
			1)提高性能 <br />
			2)新添加的元素还会有之前的事件。</p>
		<div class="all" style="margin-left: 200px;position: relative;">
			<button>1</button>
			<button>2</button>
			<button>3</button>
			<button>4</button>
			<button>5</button>
			<button>6</button>
			<button>7</button>
			<button>8</button>
			<button>9</button>
			<button>10</button>
		</div>
		<script type="text/javascript">
			function start() {

				var buttonS = document.querySelectorAll("button");
				var all = document.querySelector(".all");

				for(var j = 0; j < buttonS.length; j++) {
					buttonS[j].style.left = (buttonS[j].offsetWidth + 20) * j + "px";
					buttonS[j].style.top = 100 + "px";
				}
				aa(buttonS);

				function aa(Arr) {
					for(var i = 0; i < Arr.length; i++) {
						Arr[i].index = i;
						Arr[i].onmouseover = function(k) {
							return function() {
								Arr[k].style.backgroundColor = "black";
								Arr[k].style.border = "1px solid black";
							}
						}(i);
						Arr[i].onmouseout = function(k) {
							return function() {
								Arr[k].style.backgroundColor = "skyblue";
								Arr[k].style.border = "1px solid skyblue";
							}
						}(i);
						Arr[i].onmousedown = function(ev) {
							var ev = ev || window.event;
							var thenX = ev.clientX;
							var thenY = ev.clientY;
							var chaX = this.offsetLeft - thenX;
							var chaY = this.offsetTop - thenY;
							var aa = this.index;
							var thenLeft = this.offsetLeft;
							window.onmousemove = function(eve) {
								var eve = eve || window.event;
								var nowX = eve.clientX;
								var nowY = eve.clientY;
								Arr[aa].style.left = nowX + chaX + "px";
								Arr[aa].style.top = nowY + chaY + "px";
								for(var i = 0; i < Arr.length; i++) {
									if(i == aa) {
										continue;
									} else {
										if(check(Arr[aa], Arr[i])) {
											if(i == Arr.length - 1) {
												all.removeChild(Arr[aa]);
												var button0 = document.createElement("button");
												button0.innerHTML = aa + 1;
												all.appendChild(button0);
											} else {
												all.removeChild(Arr[aa]);
												var button0 = document.createElement("button");
												button0.innerHTML = aa + 1;
												if(aa < i) {
													all.insertBefore(button0, Arr[i + 1]);
												} else if(aa > i) {
													all.insertBefore(button0, Arr[i]);
												}
											}
											var buttonN = document.querySelectorAll("button");
											for(var j = 0; j < buttonN.length; j++) {
												buttonN[j].style.left = (buttonN[j].offsetWidth + 20) * j + "px";
												buttonN[j].style.top = 100 + "px";
											}
										}
									}
								}
							}
						}
						buttonS[i].onmouseup = function() {
							window.onmousemove = "";
							start();
						}
					}
				}
			}
			start();
			//检测碰撞
			function check(obj1, obj2) {
				var disX = (obj1.offsetWidth + obj2.offsetWidth) / 2;
				var disY = (obj2.offsetHeight + obj2.offsetHeight) / 2;
				var centerX = Math.abs((obj1.offsetLeft + (obj1.offsetWidth / 2)) - (obj2.offsetLeft + (obj2.offsetWidth) / 2));
				var centerY = Math.abs((obj1.offsetTop + (obj1.offsetHeight / 2)) - (obj2.offsetTop + (obj2.offsetHeight) / 2));
				console.log()
				if(centerX < disX && centerY < disY) {
					return true;
				} else {
					return false;
				}
			}
		</script>
	</body>

</html>

